<template>
    <el-menu
            default-active="1"
            class="index-nav-menu" :collapse="true">
        <!-- 这里 el-menu-item 的 route 属性失效 不知道为啥-->
        <router-link :to="{name:'indexPage'}">
            <el-menu-item index="1">
                <i class="el-icon-s-home"/>
            </el-menu-item>
        </router-link>

        <router-link :to="{name:'searchPage'}">
            <el-menu-item index="2">
                <i class="el-icon-search"/>
            </el-menu-item>
        </router-link>

        <router-link :to="{name: 'historyPage'}">
            <el-menu-item index="3">
                <i class="el-icon-s-order"/>
            </el-menu-item>
        </router-link>

        <router-link :to="{name: 'settingPage'}">
            <el-menu-item index="4" class="menu-bottom">
                <i class="el-icon-setting"/>
            </el-menu-item>
        </router-link>

    </el-menu>
</template>

<script>
    export default {
        name: "IndexNavMenu",
        data() {
            return {
                active: 1,
            }
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    @import "~@/styles/global.scss";

    .index-nav-menu {
        height: 100vh;
        float: left;
    }

    .menu-bottom {
        position: absolute;
        bottom: 60px;
        width: 100%;
    }
</style>
